<template>
  <div class="detail">
    <!-- 导航栏区域 -->
    <!-- 导航搜索栏 -->
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
      >
        <!-- 搜索框外左侧内容 -->
        <template #left>
          <van-icon
            name="arrow-left"
            style="margin-right: 10px"
            @click="onBack"
          />
        </template>
        <template #action>
          <van-icon name="share-o" size="18" @click="showShare = true" />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
            @select="onSelect"
          />
        </template>
      </van-search>
    </form>
    <!-- 轮播图 -->
    <div class="myswipe">
      <van-swipe :autoplay="3000" indicator-color="#f4b2bd">
        <van-swipe-item v-for="(image, index) in photo" :key="index">
          <img v-lazy="image.url" class="img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品信息 -->
    <div class="info">
      <van-cell-group inset>
        <van-cell :border="false" size="large">
          <template #title>
            <span class="custom-title">{{ originPrice }}</span>
            <van-tag type="danger" round size="large" style="margin-left: 5px"
              >劵后{{ price }}</van-tag
            >
          </template>
        </van-cell>
        <van-cell :value="listTitle" :border="false" class="desc" />
        <van-cell>
          <van-tag
            type="danger"
            round
            v-for="(i, index) in tags"
            :key="index"
            class="i"
            >{{ i }}</van-tag
          >
        </van-cell>
      </van-cell-group>
      <!-- 商品描述 -->
      <van-cell-group inset>
        <van-cell title="发货" value="浙江杭州｜快递：免运费" />
        <van-cell title="物流" value="付款后15天内发货" />
        <van-cell title="服务" value="7天无理由·付款后15天内发货" />
        <van-cell title="选择" value="请选择尺码" />
        <van-cell title="参数" value="品牌 适用年龄..." />
      </van-cell-group>
      <!-- 商品评价 -->
      <van-cell-group inset>
        <van-cell title="宝贝评价" value="更多" />
        <van-cell :title="this.username" :value="this.reviewContent" />
      </van-cell-group>
      <!-- 商品图片 -->
      <van-cell-group inset>
        <van-cell title="宝贝详情" />
        <van-cell value="" >
          <template #default>
            <img :src="i.image.url" v-for="(i,index) in descphoto" :key="index" class="descimg">
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button
        color="#7232dd"
        type="danger"
        text="进入购物车"
        @click="enterCart"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail } from "../../api/index";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
// 引入想要使用的组件
export default {
  data() {
    return {
      value: "",
      //详情页面中的数据
      detail: null,
      // 利用多个变量去写
      // title单个商品的标题
      listTitle: "",
      // 原价
      originPrice: 0,
      price: 0,
      // photo是单个商品的轮播图
      photo: [],
      // 分享面板
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      reviewContent: "",
      username: "",
      tags: [],
      descphoto:[]
    };
  },
  components: {},
  mounted() {
    this.getDetail();
  },
  methods: {
    // 进入购物车的方法
    enterCart() {
      this.$router.push("/cart");
    },
    addCart() {
      console.log("加入购物车");
      // 去调用vuex中的方法
      // 解构赋值
      const { id, title, image, price } = this.detail;
      const item = {
        id,
        title,
        image,
        price,
        num: 1,
        isChecked: true,
      }; //===>详情页面--》当前商品的信息
      this.$store.commit("cart/add_cart", item);
      this.$toast({
        type: "success",
        massage: "加入成功",
        duration: 1000,
      });
    },
    onBack() {
      this.$router.back(-1);
    },
    getDetail() {
      //方法名时随意的，但是接口是固定的
      // 页面就是路由，id在路由后面
      // console.log(this.$route);
      const id = this.$route.params.id;
      getDetail(id).then((res) => {
        // console.log(res, "详情页的数据");
        // 赋值
        this.detail = res.data.data.detail;
        console.log(this.detail);
        this.photo = res.data.data.detail.photo;
        this.listTitle = res.data.data.share.title;
        this.originPrice = "¥" + this.detail.tbOriginPrice;
        this.price = "¥" + this.detail.price;
        this.reviewContent = this.detail.tbItemReview.reviewContent;
        // console.log(this.reviewContent);
        this.username = this.detail.tbItemReview.userName;
        // console.log(this.title);
        this.tags = this.detail.accessoryHints;
        this.descphoto = this.detail.descContentList;
      });
    },
    // 显示分享面板
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};
</script>

<style scoped>
.detail {
  background-color: #f1f3f5;
}
.img {
  width: 100%;
  height: 300px;
}
.van-nav-bar {
  background-color: #f1f3f5;
}
.info {
  margin-bottom: 45px;
}
.van-cell-group {
  margin: 10px 10px;
}
.desc {
  padding: 0 16px;
}
.i {
  padding: 0 4px;
  margin: 1px;
}
.descimg {
  width: 100%;
  /* height: 100%; */
}
</style>